/**
 * Created by chesw on 2017/5/19.
 */
/**
 * Created by chesw on 2017/5/18.
 * describe: 图文样式
 */
var graphicFrame = Vue.extend({
    props: ['tab', 'detail', 'nevigation'],
    data: function () {
        return {
            detailInfo: {},
            articlesList: []
        }
    },
    created: function () {
        var _self = this;
        console.log(_self.tab);
    },
    mounted: function () {
        var _self = this;
        window.scrollBy(0, -100);     
        _self.showDetail();       
        _self.showNevigationBar(_self.nevigation);
    },
    methods: {
        showDetail: function (p_detail) {
            var _self = this;
            var detailContent = document.getElementById("detailContent");
            if (p_detail != null) {
                detailContent.innerHTML = p_detail.content;             
            }               
            else if (_self.detail != null) {
                detailContent.innerHTML = _self.detail.content;               
            }
                            
        },       
        showDetailContent: function (p_detail) {
            var _self = this;
            var detailContent = document.getElementById("detailContent");
            var titleLeft = document.getElementById("titleLeft");
            var dateLeft = document.getElementById("dateLeft");

            if (detailContent != null)
                detailContent.innerHTML = p_detail.content;
            if (titleLeft != null)
                titleLeft.innerText = p_detail.title;
            if (dateLeft != null && p_detail.add_time != null)
                dateLeft.innerText = p_detail.add_time;
        },
        showNevigationBar: function (p_navigation) {
            var _self = this;
            var navContent;
            var navBar = document.getElementById("navigation-bar");
            if (p_navigation != null) {
                _self.nevigation = p_navigation;
                if (_self.nevigation.length > 0) {
                    for (index = 0; index < _self.nevigation.length; index++) {
                        if (index === 0)
                            navContent = '<a href="' + _self.nevigation[index].url + '">' + _self.nevigation[index].name + '</a>';
                        else
                            navContent = navContent + ' > ' + '<a href="' + _self.nevigation[index].url + '">' + _self.nevigation[index].name + '</a>';
                    }
                    navContent = navContent + ' > 正文';
                    navBar.innerHTML = navContent;
                }
            }                     
        },
        GetLungCancerDocumentList: function () {
            var _self = this;           
            _self.$http.get("/DistinctMedical/GetLungCancerDocumentList").then(function (res) {
                if (res.body.length > 0) {
                    _self.articlesList = [];
                    for (var i = 0; i < res.body.length; i++) {
                        _self.articlesList.push(res.body[i]);
                    }                  
                }
                else {
                    noResult.style.display = "block";
                    pageBox.style.display = "none";
                }
            });
        },
        GetFattyLiverDocumentList: function () {
            var _self = this;
            
            _self.$http.get("/DistinctMedical/GetFattyLiverDocumentList").then(function (res) {
                if (res.body.length > 0) {
                    _self.articlesList = [];
                    for (var i = 0; i < res.body.length; i++) {
                        _self.articlesList.push(res.body[i]);
                    }
                }
                else {

                    noResult.style.display = "block";
                    pageBox.style.display = "none";
                }
            });
        },
        GetSportsMecialDocumentList: function () {
            var _self = this;
            _self.$http.get("/DistinctMedical/GetSportsMecialDocumentList").then(function (res) {
                if (res.body.length > 0) {
                    _self.articlesList = [];
                    for (var i = 0; i < res.body.length; i++) {
                        _self.articlesList.push(res.body[i]);
                    }
                }
                else {

                    noResult.style.display = "block";
                    pageBox.style.display = "none";
                }
            });
        },
        GetMiaoXiaoHuiDocumentList: function () {
            var _self = this;
            _self.$http.get("/DistinctMedical/GetMiaoXiaoHuiDocumentList").then(function (res) {
                if (res.body.length > 0) {
                    _self.articlesList = [];
                    for (var i = 0; i < res.body.length; i++) {
                        _self.articlesList.push(res.body[i]);
                    }
                }
                else {

                    noResult.style.display = "block";
                    pageBox.style.display = "none";
                }
            });
        }
    },
    template: '<div class="graphic-frame" :style="tab.style">' +
        '<div class="navigation-bar" id="navigation-bar" v-if="tab.showNavBar"></div>' +
        '<div v-if="tab.showTitle">' +
            '<div class="title-center" v-if="tab.type">' +
                '<p class="name" id="titleLeft">{{detail.title}}</p>' +
                '<p class="date" id="dateLeft">{{detail.add_time}}</p>' +
            '</div>' +
            '<div class="title-left" v-else>' +
                '<p id="titleLeft">{{detail.title}}</p>' +
            '</div>' +
        '</div>'+
        '<div class="gfc-content">' +
            '<div class="share flex" v-if="tab.showShare">' +
                '<p class="title">分享到：</p>' +
                '<p class="share-icon share-add"></p>' +
                '<p class="share-icon share-qq"></p>' +
                '<p class="share-icon share-sina"></p>' +
                '<p class="share-icon share-wb"></p>' +
                '<p class="share-icon share-rr"></p>' +
                '<p class="share-icon share-wx"></p>' +
            '</div>' +
            '<ul>' +
                '<li id="detailContent" class="word"></li>' +
            '</ul>' +
            '<div class="relevant-articles" v-if="tab.showRelevant">' +
                '<p class="title">相关文章</p>' +
                '<ul class="c-relevant-content">' +
                    '<li v-for="rt in articlesList"><a :href="[\'/NewsDetail/Index?Id=\'+rt.id+\'&ShowVideo=false\']" target="_blank">{{rt.title}}</a></li>' +
                '</ul>' +
            '</div>' +
            //'<div class="relevant-doctor" v-if="tab.showRelevant">' +
            //    '<p class="title">相关医生</p>' +
            //    '<ul class="c-relevant-content">' +
            //        '<li v-for="dl in doctorList"><a :href="dl.url">{{dl.name}}</a></li>' +
            //    '</ul>' +
            //'</div>' +
        '</div>'+
    '</div>'
});